<template>
    <div class="tags">
        <ul>
            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
               <span @click="changeroute(item.path)" class="tags-li-title">
                   {{item.title}}
               </span>
               <span  class="tags-li-icon" @click="closeTags(index)">
               	<img v-show="isActive(item.path)" style="width:16px;position:relative;top:-2px" src="./cuo.png" alt="">
               </span>
            </li>
        </ul>
        <div class="tags-close-box">
			 <a-dropdown :trigger="['click']">
			    <a class="ant-dropdown-link" @click.prevent>
			     标签选项
			      <DownOutlined />
			    </a>
			    <template #overlay>
			      <a-menu @click="handleMenuClick">
			        <a-menu-item key="0">
			          关闭其他
			        </a-menu-item>
			        <a-menu-item key="1">
			          关闭所有
			        </a-menu-item>
			      </a-menu>
			    </template>
			  </a-dropdown>
           <!-- <el-dropdown @command="handleTags">
                <el-button size="small"  type="primary">
                    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->
        </div>
    </div>
</template>

<script>
    
   
    import bus from './bus';
	import {
	 CloseOutlined
	} from '@ant-design/icons-vue';
    export default {
		components:{
			CloseOutlined
		},
        data() {
            return {
                tagsList: []
            }
        },
        methods: {
			changeroute(path){
				this.$router.push(path);
			},
			handleMenuClick(e) {
				e.key == '0' ? this.closeOther() : this.closeAll();
			   
			},
            isActive(path) {
                return path === this.$route.fullPath;
            },
            // 关闭单个标签
            closeTags(index) {
                const delItem = this.tagsList.splice(index, 1)[0];
                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
                if (item) {
                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                }else{
                    this.$router.push('/');
                }
            },
            // 关闭全部标签
            closeAll(){
                this.tagsList = [];
                this.$router.push('/');
            },
            // 关闭其他标签
            closeOther(){
                const curItem = this.tagsList.filter(item => {
                    return item.path === this.$route.fullPath;
                })
                this.tagsList = curItem;
            },
            // 设置标签
            setTags(route){
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
                if(!isExist){
                    if(this.tagsList.length >= 8){
                        this.tagsList.shift();
                    }
                    this.tagsList.push({
                        title: route.meta.title,
                        path: route.fullPath,
                        name: route.matched[1].components.default.name
                    })
                }
                bus.emit('tags', this.tagsList);
            }
        },
        computed: {
            showTags() {
                return this.tagsList.length > 0;
            }
        },
        watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            }
        },
        created(){
            this.setTags(this.$route);
            
            bus.on('close_current_tags', () => {
                for (let i = 0, len = this.tagsList.length; i < len; i++) {
                    const item = this.tagsList[i];
                    if(item.path === this.$route.fullPath){
                        if(i < len - 1){
                            this.$router.push(this.tagsList[i+1].path);
                        }else if(i > 0){
                            this.$router.push(this.tagsList[i-1].path);
                        }else{
                            this.$router.push('/');
                        }
                        this.tagsList.splice(i, 1);
                        break;
                    }
                }
            })
        }
    }

</script>


<style>
	.tags-li-icon .anticon{
		margin-left:5px;
	}
    .tags {
        position: relative;
    	
        height: 48px;
       
        background: #569DFF;
        box-shadow: 0px 5px 10px 0px #92C1FF;
        border-radius: 24px;
       
        padding-right: 120px;
        
    }
    
    .tags ul {
    	
    	padding-left:24px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }
    
    .tags-li {
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	padding-left:15px;
    	box-sizing: border-box;
    	position:relative;
    	z-index:1;
    	justify-content: center;
    	width: 96px;
    	height: 56px;
    	
    	border-radius: 4px;
        float: left;
        margin: 0px 5px 2px 3px;
        top:-5px;
        font-size: 14px;
    	display:flex;
        overflow: hidden;
        cursor: pointer;
        align-items: center;
        color: #fff;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }
    
    .tags-li:not(.active):hover {
       opacity:.98;
    }
    
    .tags-li.active {
        color: #fff;
    }
    

    .tags-li-title {
        float: left;
        
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      
        color: #fff;
    }

    .tags-li.active .tags-li-title {
        color: #fff;
    }
	
	.tags-li.active .tags-li-title {
	    color: #fff;
	}
	.tags-li.active {
	    color: #fff;
		background: #398CFF;
		box-shadow: 0px 5px 5px 0px rgba(116,176,255,0.5);
	}
	

   .tags-close-box {
   	
   	border-radius: 0px 24px 24px 0px;
       position: absolute;
       right: 0;
       top: 0;
       box-sizing: border-box;
       
      display:flex;
      justify-content: center;
      align-items: center;
       width: 110px;
       height: 48px;
       background: #fff;
       
       z-index: 10;
   }

</style>
